// Home.tsx - 首页组件
// 这是应用的首页，展示用户仪表盘，包括账户余额、卡片统计、资金趋势和最近充值记录

// 导入React和必要的Hook
// useState: 用于在函数组件中添加状态管理
// useEffect: 用于处理副作用操作，如数据获取、订阅等
import React, { useState, useEffect } from 'react';

// 导入子组件：首页使用的各个展示组件
import AccountBalance from '@/components/AccountBalance'; // 账户余额组件
import CardCount from '@/components/CardCount';           // 卡片数量统计组件
import FundTrends from '@/components/FundTrends';         // 资金趋势图表组件
import LastRecharge from '@/components/LastRecharge';     // 最近充值记录组件

// 导入API函数：从API模块获取仪表盘数据
import { getDashboardInfo } from '@/api/modules/index';

// 定义Home组件：使用React.FC（函数组件）类型
// 这是一个页面级组件，负责组织和管理首页的所有内容和数据
const Home: React.FC = () => {
  // 使用useState Hook定义加载状态
  // loading: 布尔值，表示数据是否正在加载中
  // setLoading: 用于更新loading状态的函数
  const [loading, setLoading] = useState(true);

  // 使用useState Hook定义账户信息状态
  // account: 对象，包含账户余额、充值统计等信息
  // setAccount: 用于更新account状态的函数
  const [account, setAccount] = useState({
    balance: '0',                   // 账户余额，字符串类型（通常用于货币显示）
    recharge_sum: '0',              // 充值总金额
    recharge_count: 0,              // 充值次数
    recharge_pending_sum: '0',      // 待处理充值金额
    recharge_pending_count: 0,      // 待处理充值次数
  });

  // 使用useState Hook定义卡片BIN列表状态
  // cardBinList: 数组，包含卡片BIN信息（BIN是银行卡的前6位数字）
  // setCardBinList: 用于更新cardBinList状态的函数
  const [cardBinList, setCardBinList] = useState<Array<{ cardbin: number; count: number; cardScheme: string }>>([]);

  // 使用useState Hook定义卡片总数状态
  // cardCount: 数字，表示用户拥有的卡片总数
  // setCardCount: 用于更新cardCount状态的函数
  const [cardCount, setCardCount] = useState(0);

  // 使用useState Hook定义卡片状态统计
  // cardStatus: 对象，包含各种状态卡片的数量统计
  // setCardStatus: 用于更新cardStatus状态的函数
  const [cardStatus, setCardStatus] = useState({
    normal: 0,      // 正常状态卡片数量
    canceling: 0,   // 注销中卡片数量
    cancelled: 0,   // 已注销卡片数量
    other: 0,       // 其他状态卡片数量
  });

  // 使用useEffect Hook获取数据：在组件挂载后执行数据获取操作
  // useEffect接收两个参数：回调函数和依赖数组
  // 空依赖数组[]表示这个effect只在组件挂载时执行一次
  useEffect(() => {
    // 定义异步函数getData：用于从API获取仪表盘数据
    const getData = async () => {
      setLoading(true); // 开始加载，设置loading状态为true
      try {
        // 调用API函数获取仪表盘数据
        // await关键字用于等待异步操作完成，确保代码按顺序执行
        const response = await getDashboardInfo();
        
        // 类型断言：将response转换为DashboardInfoType类型
        // 这是因为TypeScript无法自动推断API返回的具体类型
        const data = response as unknown as import('@/api/modules/index').DashboardInfoType;
        
        // 更新状态：将API返回的数据设置到对应的状态中
        setAccount(data.account); // 设置账户信息
        
        // 设置卡片BIN列表：使用map方法转换数据格式
        setCardBinList(data.card.cardbin_list.map(item => ({
          cardbin: item.cardbin,       // 卡片BIN号
          count: item.count,           // 该BIN的卡片数量
          cardScheme: item.cardScheme  // 卡组织信息（如Visa、银联等）
        })));
        
        setCardCount(data.card.card_count);     // 设置卡片总数
        setCardStatus(data.card.card_status);   // 设置卡片状态统计
      } catch (error) {
        // 错误处理：如果数据获取失败，在控制台输出错误信息
        console.error('获取数据失败:', error);
      } finally {
        // 无论成功或失败，最终都设置loading状态为false
        // finally块确保loading状态总是会被更新
        setLoading(false);
      }
    };

    // 调用getData函数执行数据获取
    getData();
  }, []); // 空依赖数组，表示effect只执行一次

  // 返回组件的JSX结构
  // 在React中，组件必须返回一个React元素（JSX）
  return (
    // 外层容器：使用Tailwind CSS类设置内边距
    // px-6: 水平方向内边距6个单位（1.5rem）
    // pt-6: 顶部内边距6个单位
    <div className="px-6 pt-6">
      {/* 网格布局容器：使用Tailwind CSS网格系统 */}
      {/* grid-cols-1: 默认1列布局，lg:grid-cols-12: 在大屏幕上12列布局 */}
      {/* gap-5: 网格项之间的间距为5个单位（1.25rem） */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-5">
        {/* 账户余额组件：占据5列宽度 */}
        <div className="lg:col-span-5">
          {/* 传递loading状态和account数据给AccountBalance组件 */}
          <AccountBalance loading={loading} account={account} />
        </div>
        
        {/* 卡片统计组件：占据7列宽度 */}
        <div className="lg:col-span-7">
          {/* 传递loading状态和卡片相关数据给CardCount组件 */}
          <CardCount
            loading={loading}
            cardCount={cardCount}
            cardBinList={cardBinList}
            cardStatus={cardStatus}
          />
        </div>
        
        {/* 最近充值记录组件：占据7列宽度 */}
        <div className="lg:col-span-7">
          {/* 传递loading状态给LastRecharge组件 */}
          <LastRecharge loading={loading} />
        </div>
        
        {/* 资金趋势组件：占据5列宽度 */}
        <div className="lg:col-span-5">
          {/* 传递loading状态给FundTrends组件 */}
          <FundTrends loading={loading} />
        </div>
      </div>
    </div>
  );
};

// 导出Home组件作为默认导出
// 这样其他文件可以通过import Home from '@/views/Home'来导入
export default Home;